<template>
  <div class="project-container">
    <div class="project-container__main">
      <div class="project-container__left">
        <nav-wrap
          width="112px"
          :list="list"
        ></nav-wrap>
      </div>
        <div class="project-container__center">
          <card-container
            width="816px"
            :title="labelTitle"
          >
            <project-card v-if="showPagination" v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
            <empty-card v-if="projectList.length===0" height="556px"></empty-card>

          </card-container>
          <div class="pagination">
            <pagination style="margin: 0 auto;" :pages="pages" ref="pagination"  v-on:listenPageChange="changePage"></pagination>
          </div>
        </div>
      <div class="project-container__right">
        <div class="right__write-project" @click="toRelease">发布项目</div>
        <card-container
          title="热门项目"
          width="302px"
          style="margin-top: 16px;padding-bottom: 20px"
        >
          <div  @click="changeRoute2('/project/detail/'+val.projectId)" class="right__hot-item" v-for="(val,index) in hotProjectList" :key="val.projectId">
            <yun-avatar size="48px" border-r="4px" :src="val.cover" :name="val.projectName"></yun-avatar>
            <div class="right__hot-item__content">
              <p>{{val.projectName}}</p>
              <h6>{{val.projectDescription}}</h6>
            </div>
          </div>
        </card-container>
      </div>
    </div>
  </div>
</template>

<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import EmptyCard from '../../components/pc/emptyCard';

export default {
  components: {Pagination, ProjectCard, CardContainer, NavWrap,EmptyCard},

  async asyncData({$axios,query}){
    let typeList = await $axios.$get(config.api.get.ProjectCategory.list);
    let  params={
      page:1,
      size:12
    };
    if(query && query.type!=='all' ){
      params.categoryId = query.type
    }
    let   articleList = await  $axios.$get(config.api.get.Project.list,{params:params});
    return {articleList:articleList.data.dataList, articlePages:articleList.data.totalPage,typeList:typeList.data}

  },

  data(){
    return{
      list: [
        {
          label: '全部项目',
          address: '/project',
          type: 'all'
        },
      ],
      projectList:[],
      hotProjectList:[],
      currentPage:1,
      pages:1,
      labelTitle:'',
      showPagination:true,
      showPaginationTimer:null
    }
  },
  created() {

    if(this.$route.query.type){

    }else{
      this.$router.replace({
        path: '/project',
        query: {
          type: 'all'
        }
      });

    }
    this.handleArticleList();
    this.dataGetProjectCategory();
    this.dataGetHotProjectList();
    this.getLabelTitle();


  },

  watch:{
    $route(){
      this.restartPagination();
      this.getLabelTitle()
    }
  },

  methods: {
    changeRoute2(r){
      let routeUrl = this.$router.resolve({
        path: r
      });
      window.open(routeUrl.href,'_blank')
    },

    handleArticleList(){
      this.projectList = this.articleList;
      this.pages = this.articlePages;
    },
    toRelease(){
      this.$router.push('/project/release')
    },
    restartPagination(){

      if(process.browser){
        this.projectList = [];

        this.$refs.pagination.setCurrentPage(1)
      }
    },
    getLabelTitle(){
      let type = this.$route.query.type;
      this.list.map((val,index)=>{
        if(val.type===type){
          this.labelTitle =  val.label
        }
      })
    },
    dataGetProjectCategory(){
        this.typeList.map((val,index)=>{
          this.list.push({
            label: val.category,
            address: '/project',
            type: val.categoryId.toString()
          })
        })

    },
    dataGetHotProjectList(){
      let  params={
        page:1,
        size:5
      };
      this.$axios.$get(config.api.get.Project.hotList,{params:params}).then((response)=>{
        this.hotProjectList = response.data.dataList;
      })

    },
    dataGetProjectList(currentPage){
      let  params={
        page:currentPage,
        size:12
      };
      if(this.$route.query.type&&this.$route.query.type!=='all' ){
        params.categoryId = this.$route.query.type
      }
      this.$axios.$get(config.api.get.Project.list,{params:params}).then((response)=>{
        this.projectList = response.data.dataList;
        this.pages = response.data.totalPage;
      })

    },
    changePage(currentPage){
      //返回页数 请求新的数据
      if(this.firstLoad){
        this.firstLoad = false
      }else{
        this.dataGetProjectList(currentPage)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .nuxt-link-exact-active {
    color: #00AAE6 !important;
  }
  .project-container{
    > .project-container__main{
      width: $pageWidth;
      margin: 0 auto;
      padding-top: 16*$length;
      padding-bottom: 32*$length;
      @extend %flex-row-spb;
      align-items: start;
      .project-container__left{}
      .project-container__center{
        .pagination{
          margin: 32*$length;
        }
      }
      .project-container__right{
        .right__write-project{
          width: 302*$length;
          background-color: #fff;
          @include fontStyle(14,56,500,#00AAE6,center);
          @include border-radius(4*$length);
          @extend %animate-transition;
          @extend %cursorPointer;
          &:hover {
            color: #fff;
            background-color: #00AAE6;
          }
        }

        .right__hot-item{
          padding:8*$length 16*$length;
          width:302*$length;
          height:64*$length;
          box-sizing: border-box;
          @extend %cursorPointer;
          @extend %flex-row-spb;

          justify-content: flex-start;
          &:hover{
            .right__hot-item__content{
              p{
                color: rgba(0,170,230,1)
              }
              h6{
                color: rgba(0,170,230,.8)

              }
            }
          }
          .right__hot-item__content{
            margin-left:10*$length;
            width:210*$length;
            p{
              @include fontStyle(14,19,500,#2F2F2F,left);
              @extend %nowrap;
              @extend %animate-transition;
            }
            h6{
              margin-top:10*$length;
              @include fontStyle(12,16,500,#999999,left);
              @extend %nowrap;
              @extend %animate-transition;

            }
          }
        }
      }
    }
  }
</style>
